<template>
  <base-chart :options="options" :height="height" />
</template>

<script setup>
import { computed } from 'vue'
import BaseChart from '@/base-ui/echart/base-chart.vue'

const props = defineProps({
  height: {
    type: String,
    default: '100%'
  },
  title: {
    type: String,
    default: ''
  },
  maxTimevalue: {
    type: Array,
    default: () => []
  },
  minTimevalue: {
    type: Array,
    default: () => []
  },
  yLabels: {
    type: Array,
    default: () => []
  }
})

const options = computed(() => {
  return {
    title: {
      text: '参与断面方案调度时序图',
      left: 'center',
      textStyle: {
        fontWeight: 400,
        fontSize: 16
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      top: '10%',
      right: '5%'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01]
    },
    yAxis: {
      type: 'category',
      data: props.yLabels
    },
    dataZoom: [
      {
        show: true,
        // realtime: true,
        // start: 0,
        right: '5%',
        width: 8,
        // height: 10, // 组件高度
        showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
        // end: 35,
        startValue: 0,
        endValue: 5,
        brushSelect: false, // 是否开启刷选功能
        orient: 'vertical',
        backgroundColor: 'transparent',
        showDataShadow: false,
        fillerColor: 'rgba(64, 83, 133, 0.8)',
        // borderColor: 'transparent',
        handleSize: 0
      },
      {
        zoomLock: true, // 这个开启之后只能通过鼠标左右拉动，不能滚动显示
        type: 'inside',
        orient: 'vertical'
      }
    ],
    series: [
      {
        name: '最大耗时',
        type: 'bar',
        barWidth: '40%',
        itemStyle: {
          color: '#70B603'
        },
        data: props.maxTimevalue
      },
      {
        name: '最小耗时',
        type: 'bar',
        barWidth: '40%',
        itemStyle: {
          color: '#0054DE'
        },
        data: props.minTimevalue
      }
    ]
  }
})
</script>
